<template>
  <div class="m-order-common">
    <!-- E店宝订单查看 -->

    <!-- 搜索 -->
    <div class="order-search-tab" v-if="moreOptions">
      <div class="o" v-if="cParams.monthType != 'month' && cParams.monthType != 'befMonth'">
        <span class="title">下单时间</span>
        <div class="dis-block">
          <div class="date dis-block">
            <w-date-picker language="ch" placeholder="起始时间" v-model="cParams.addStartTime"></w-date-picker>
          </div>
          <span class="icon">—</span>
          <div class="date dis-block">
            <w-date-picker language="ch" placeholder="结束时间" v-model="cParams.addEndTime"></w-date-picker>
          </div>
        </div>
      </div>
      <div class="o">
        <span class="title">成交时间</span>
        <div class="dis-block">
          <div class="date dis-block">
            <w-date-picker language="ch" placeholder="起始时间" v-model="cParams.payStartTime"></w-date-picker>
          </div>
          <span class="icon">—</span>
          <div class="date dis-block">
            <w-date-picker language="ch" placeholder="结束时间" v-model="cParams.payEndTime"></w-date-picker>
          </div>
        </div>
      </div>
      <div class="o" style="margin-right: 8%;">
        <span class="title">成交金额</span>
        <div class="select dis-block">
          <w-input v-model="cParams.ofPriceFloor"></w-input>
        </div>
        <span class="icon">—</span>
        <div class="select dis-block">
          <w-input v-model="cParams.ofPriceCeiling"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">商品货号</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.goodsSerial"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">商品名称</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.goodsName"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">订单状态</span>
        <div class="o-select dis-block">
          <w-select :options="statusOptions" v-model="cParams.orderStatus"></w-select>
        </div>
      </div>
      <div class="o">
        <span class="title">订单编号</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.orderId"></w-input>
        </div>
      </div>
      <div class="o">
        <span class="title">物流单号</span>
        <div class="input dis-block">
          <w-input holder="请填写" v-model="cParams.shipCode"></w-input>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="order-options">
        <w-button-group>
          <w-button type="main" @on-click="fetchCOrderListSearch">搜索订单</w-button>
          <!-- <w-vendor-excel :table-data="orderList.recordList"></w-vendor-excel> -->
          <w-button type="option" style="margin-left: 30px" :disabled="!orderList.recordList || orderList.recordList.length == 0" @on-click="onExportList">导出</w-button>
        </w-button-group>
      </div>
    </div>
    <!-- 收起、展示按钮 -->
    <div class="retact cur" @click="onRetact">
      <span class="option-title">{{moreOptions == true ? '收起': '展开'}}</span>
      <i class="icon-arrow" :class="{'arrow-actived': moreOptions == false}"></i>
    </div>

    <!-- 订单列表 -->
    <div class="m-order-lists">
      <div>
        <!-- 订单状态列表 -->
        <order-search :search-btns="searchBtns" @on-changeBtns="onChangeOrderStatus"></order-search>
      </div>
      <!-- 操作 -->
      <div class="list-options clearfix">
        <div class="fl">
          <div class="check-box">
            <w-checkbox v-model="all" :label="1" @input="onCheckedAll">
              <span class="all">全部</span>
            </w-checkbox>
          </div>
          <div class="btns-group">
            <w-button-group>
              <w-button :type="`${orderType == 'sign' ? 'main' : 'option'}`" @on-click="onChangeStatus('sign')">标记</w-button>
              <w-button v-show="cParams.orderStatus == '10'" :type="`${orderType == 'free' ? 'main' : 'option'}`" @on-click="onChangeStatus('free')">免运费</w-button>
              <w-button type="disabled" @on-click="onChangeStatus('outStock')">缺货</w-button>
              <!-- <w-button :type="`${orderType == 'outStock' ? 'main' : 'option'}`" @on-click="onChangeStatus('outStock')">缺货</w-button> -->
            </w-button-group>
          </div>
          <w-checkbox 
            v-if="(cParams.orderStatus == 'month' || cParams.orderStatus == '' || cParams.orderStatus == 'befMonth') && cParams.deleteStatus != '-1'" 
            v-model="deleteStatusSign" 
            label="deleteStatus"
            @on-change="onChangeDelOrder">
            <span class="no-colse">不显示已关闭的订单</span>
          </w-checkbox>
          
        </div>
        <div class="only-page fr" v-if="orderList.pageCount > 1">
          <w-paging type="showArrow" :current="orderList.currentPage" :total="orderList.pageCount" @on-page="onChangePage"></w-paging>
        </div>
      </div>
      <!-- 订单列表组件 -->
      <div>
        <div style="margin-bottom: 20px;">
          <w-table :columns="columns"></w-table>
        </div>
        <div v-if="orderList.recordList && orderList.recordList.length">
          <order-item 
            v-for="(order, orderIndex) in orderList.recordList"
            :key="orderIndex" 
            :order-index="orderIndex" 
            :order-list="orderList.recordList" 
            :order="order" 
            :all="all" 
            :showTd="showTd"
            @on-checked="onCheckedOrAll" 
            @on-refresh="fetchCOrderList"></order-item>
        </div>
        <div style="text-align: center; margin: 20px" v-else>
          <p>暂无数据</p>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pages" v-if="orderList.pageCount > 1">
      <w-paging :current="orderList.currentPage" :total="orderList.pageCount" @on-page="onChangePage"></w-paging>
    </div>

    <!-- 标记 -->
    <w-panel-validate :panel-title="panelTitleSing" title="标记" v-model="panelTitleSing" :confirm-text="`提交`" @on-confirm="onConfirmSign" @on-cancel="_cancelSign">
      <div class="m-confirm-sign">
        <div class="sign">
          <span class="title">标记</span>
          <div class="info">
            <div class="flag">
              <w-radio :label="`red`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_red.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`yellow`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_yellow.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`green`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_green.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`blue`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_blue.png" alt="">
              </w-radio>
            </div>
            <div class="flag">
              <w-radio :label="`purple`" name="flag" v-model="storeSign">
                <img src="../../assets/flag_purple.png" alt="">
              </w-radio>
            </div>
          </div>
        </div>
        <div class="sign">
          <span class="title" style="vertical-align: top;">标记备注</span>
          <div class="info">
            <div class="text-area">
              <w-input type="textarea" holder="请输入" rule="isEmpty" error="请输入备注信息" v-model="storeSignInfo"></w-input>
            </div>
            <w-radio label="1" name="sign" v-model="singP" class="radio">覆盖已有标记内容</w-radio>
          </div>
        </div>
      </div>
    </w-panel-validate>

  </div>
</template>

<script>
// 订单状态列表 
import { API } from 'js/const'
import { joinQueryParamsToUrl } from 'js/util'
import OrderSearch from './components/orderSearch'
import OrderItem from './components/eStoreItem'
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      showTd: true,
      all: false, // CheckBox是否全部选中
      checkOrder: false, // CheckBox是否选中,
      orderType: '',
      statusOptions: [
        {
          label: '等待买家付款',
          value: '10'
        },
        {
          label: '等待发货',
          value: '20'
        },
        {
          label: '已发货',
          value: '30'
        },
        {
          label: '退款中',
          value: '22'
        },
        {
          label: '需求评价',
          value: '50'
        },
        // {
        //   label: '成功的订单',
        //   value: ''
        // },
        {
          label: '关闭的订单',
          value: '0'
        }
      ],
      searchBtns: [
        {
          title: '当月订单',
          status: 'month'
        },
        {
          title: '全部订单',
          status: ''
        },
        {
          title: '关闭订单',
          status: '-1'
        },
        {
          title: '上月订单',
          status: 'befMonth'
        }
      ],
      columns: [
        {title: '货品', width: '26%'},
        {title: '单价', width: '7%'},
        {title: '数量', width: '7%'},
        {title: '买家', width: '14%'},
        {title: '交易状态', width: '14%'},
        {title: '实收款', width: '14%'}
        // {title: '操作人', width: '18%'}
      ],
      checkedAll: false, // CheckBox是否全部选中
      startPrice: '',
      endPrice: '',
      moreOptions: true,
      deleteStatusSign: false, // 已关闭订单状态
      // 普通订单列表参数
      cParams: {
        accessToken: this.$store.getters.token || '',
        threeMenuCode: this.$route.query.three || '',
        orderMark: '0', // 订单类型
        currentPage: 1,
        showCount: 20,
        storeName: '好下单E店宝',
        storeTelephone: '',
        receiverMobile: '',
        userName: '',
        consignor: '',
        shipCode: '',
        paymentMark: '',
        orderId: '',
        addStartTime: '',
        addEndTime: '',
        payStartTime: '',
        payEndTime: '',
        orderStatus: '',
        ofPriceFloor: '',
        ofPriceCeiling: '',
        monthType: 'month',
        goodsSerial: '',
        goodsName: '',
        deleteStatus: '', // 不显示已关闭的订单
        orderType: 1
      },
      orderList: {},
      singP: 1,
      panelTitleSing: false, // 标记
      storeSign: 'red',
      storeSignInfo: ''
    }
  },
  components: {
    'order-search': OrderSearch,
    'order-item': OrderItem
  },
  created() {
    this.fetchCOrderList()
  },
  computed: {
    ...mapGetters(['token']),
    // 判断订单列表来源
    options() {
      if (this.$route.query.origin && this.$route.query.origin == 'fight') {
        return false
      }
      return true
    }
  },
  methods: {
    /**
     * 获取普通订单,拼单子订单列表
     */
    fetchCOrderList() {
      let _this = this
      // 来源为拼单主订单，则调取该主订单下的子订单列表
      if (this.$route.query.origin && this.$route.query.origin == 'fight') {
        this.cParams.ofId = this.$route.query.mainid || ''
        apiOrderMange.apiFOrderList(this.cParams).then(data => {
          _this.orderList = data.data || {}
          if (_this.orderList.recordList && _this.orderList.recordList.length) {
            _this.orderList.recordList.forEach(list => {
              _this.$set(list, 'checked', _this.all)
            })
          }
        })
      } else {
        // 获取普通订单列表
        apiOrderMange.apiOrderListAll(this.cParams).then(data => {
          _this.orderList = data.data || {}
          if (_this.orderList.recordList && _this.orderList.recordList.length) {
            _this.orderList.recordList.forEach(list => {
              _this.$set(list, 'checked', _this.all)
            })
          }
        })
      }
    },
    /**
     * 导出
     */
    onExportList() {
      if (this.$route.query.origin && this.$route.query.origin == 'fight') {
        apiOrderMange.apiFOrderExport(this.cParams).then(resp => {
          window.location.href = joinQueryParamsToUrl(`${API}orderform/YouzhengOrderform/exportFightChilds`, this.cParams)
        })
      } else {
        apiOrderMange.apiOrderExport(this.cParams).then(resp => {
          // window.location.href = `${API}orderform/YouzhengOrderform/exportRefundOrder?accessToken=${this.token}&type=${1}&threeMenuCode=${this.$route.query.three}&orderMark=0&storeName=${this.cParams.storeName}&storeTelephone=${this.cParams.storeTelephone}&receiverMobile=${this.cParams.receiverMobile}&userName=${this.cParams.userName}&consignor=${this.cParams.consignor}&shipCode=${this.cParams.shipCode}&paymentMark=${this.cParams.paymentMark}&orderId=${this.cParams.orderId}&addStartTime=${this.cParams.addStartTime}&payEndTime=${this.cParams.payEndTime}&orderStatus=${this.cParams.orderStatus}&ofPriceFloor=${this.cParams.ofPriceFloor}&ofPriceCeiling=${this.cParams.ofPriceCeiling}&monthType=${this.cParams.monthType}&goodsSerial=${this.cParams.goodsSerial}&goodsName=${this.cParams.goodsName}&deleteStatus=${this.cParams.deleteStatus}&payStartTime=${this.cParams.payStartTime}`
          window.location.href = joinQueryParamsToUrl(`${API}orderform/YouzhengOrderform/exportRefundOrder`, this.cParams)
        })
      }
    },
    /**
     * 搜索，重置入参
     */
    fetchCOrderListSearch() {
      this.cParams.currentPage = 1
      this.fetchCOrderList()
    },
    /**
     * 显隐已关闭的订单的条件搜索
     */
    onChangeDelOrder(bool) {
      if (bool) {
        this.cParams.deleteStatus = '0'
      } else {
        this.cParams.deleteStatus = ''
      }
      this.fetchCOrderList()
    },
    /**
     * 更改订单搜索条件，重置参数
     */
    onChangeOrderStatus(type) {
      this.cParams.currentPage = 1
      if (type == '-1') {
        // 查询已关闭的订单时，重置monthtype参数
        this.cParams.deleteStatus = type
        this.cParams.monthType = ''
      } else {
        // 查询非已关闭的订单时，重置deletestatus参数
        this.cParams.monthType = type
        this.cParams.deleteStatus = ''
      }
      this.deleteStatusSign = false
      // 重置参数
      this.cParams.storeName = ''
      this.cParams.storeTelephone = ''
      this.cParams.receiverMobile = ''
      this.cParams.userName = ''
      this.cParams.consignor = ''
      this.cParams.shipCode = ''
      this.cParams.paymentMark = ''
      this.cParams.orderId = ''
      this.cParams.addStartTime = ''
      this.cParams.addEndTime = ''
      this.cParams.payStartTime = ''
      this.cParams.payEndTime = ''
      this.cParams.orderStatus = ''
      this.cParams.ofPriceFloor = ''
      this.cParams.ofPriceCeiling = ''
      this.cParams.goodsSerial = ''
      this.cParams.goodsName = ''
      this.fetchCOrderList()
    },
    /**
     * 切换订单是否标记、免费、缺货等
     */
    onChangeStatus(type) {
      if (this.orderList.recordList && this.orderList.recordList.length) {
        let ids = []
        this.orderList.recordList.forEach(list => {
          if (list.checked) {
            ids.push(list.id)
            this.orderType = type
            // 免运费操作
            if (this.orderType == 'free') {
              apiOrderMange.apiCOrderListFree(this.token, ids, this.$route.query.three).then(data => {
                this.$toast('修改运费成功', () => {
                  this.fetchCOrderList()
                  this.orderType = ''
                })
              })
            } else if (this.orderType == 'sign') {
              this.panelTitleSing = true
            }
          }
        })
      }
    },
    /**
     * 标记提交
     */
    onConfirmSign() {
      let _this = this
      const params = {
        accessToken: this.token,
        ofId: [],
        storeSign: this.storeSign, // 标记类型
        storeSignInfo: this.storeSignInfo, // 内容
        type: 3
      }
      this.orderList.recordList.forEach(list => {
        if (list.checked) {
          params.ofId.push(list.id)
          apiOrderMange.apiDeliveryGoodsFar(params).then(data => {
            _this.$toast('标记成功', () => {
              _this.fetchCOrderList()
              _this.panelTitleSing = false
              _this.orderType = ''
            })
          })
        }
      })
    },
    /**
     * 清空标记内容
     */
    _cancelSign() {
      this.storeSignInfo = ''
    },
    /**
     * 切换全选
     */
    onCheckedAll(checked) {
      if (!this.orderList.recordList || this.orderList.recordList.length == 0) return
      if (checked) {
        this.orderList.recordList.forEach(list => {
          list.checked = true
        })
      } else {
        this.orderList.recordList.forEach(list => {
          list.checked = false
        })
      }
    },
    /**
     * 全选判断
     */
    onCheckedOrAll(all) {
      this.all = all
    },
    /**
     * 收起更多的搜索条件
     */
    onRetact() {
      this.moreOptions = !this.moreOptions
    },
    /**
     * 分页
     */
    onChangePage(page) {
      this.cParams.currentPage = page
      this.fetchCOrderList()
    }
  },
  watch: {
    $route(to, from) {
      // 若来源不一致，则重新获取接口数据
      if (from.query.origin && from.query.origin == 'fight') {
        this.fetchCOrderList()
      }
    }
  }
}
</script>

<style lang="scss">
.m-order-common {
  .datepicker {
    width: 142px;
    height: 28px;
  }
  .form-control {
    height: 28px !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
  }
  .order-options {
    .btn {
      width: 170px !important;
    }
  }
  .btns-group {
    .btn {
      width: 60px !important;
    }
  }
  .pages {
    .m-paging {
      text-align: right !important
    }
  }
  .m-confirm-sign {
    .text-area {
      .form-control {
        height: 90px!important;
      }
      .w-input .error-tip {
        top: 56px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.m-confirm-sign {
  // text-align: center;
  .sign {
    margin-bottom: 20px;
  }
  .title {
    width: 80px;
    display: inline-block;
    text-align: right;
    font-size: 12px;
  }
  .info {
    width: 300px;
    margin-left: 10px;
    display: inline-block;
  }
  .radio {
    text-align: left;
    width: 100%;
    margin-top: 10px;
  }
  .flag {
    display: inline-block;
    margin-right: 3%;
    img {
      width: 14px;
      height: 14px;
    }
  }
}
.m-order-lists {
  margin-top: 20px;
}
.order-search-tab {
  margin-top: 20px;
  .title {
    width: 56px;
    text-align: right;
    display: inline-block;
    margin-right: 10px;
    font-size: 12px
  }
  .icon {
    padding: 0 10px;
  }
  .dis-block {
    display: inline-block;
  }
  .date {
    width: 170px;
    display: inline-block;
    vertical-align: middle;
  }
  .o {
    margin-right: 40px;
    margin-bottom: 20px;
    display: inline-block;
  }
  .select {
    width:142px;
    height:28px; 
    vertical-align: middle;
  }
  .o-select {
    width: 170px;
    height: 28px;
  }
  .input {
    width: 170px;
    vertical-align: middle;
  }
  .order-options {
    margin: 48px auto 20px;
    text-align: center;
  }
}
.retact {
  text-align: center;
  color: #9B9B9B;
  padding-bottom: 5px;
  border-bottom: 1px solid #D7D7D7;
  font-size: 10px;
  .icon-arrow {
    width: 10px;
    height: 5px;
    background: url(../../assets/shouqi.png) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    margin-bottom: 2px;
  }
  .arrow-actived {
    transform: rotate(-180deg)
  }
}
.list-options {
  padding: 14px 0 14px 5px;
  .check-box {
    display: inline-block;
    margin-right: 10px;
    line-height: 22px;
    .all {
      padding-left: 10px;
    }
  }
  .btns-group {
    display: inline-block;
    margin-right: 30px;
  }
  .no-colse {
    padding-left: 10px;
    font-size: 12px;
  }
  .only-page {
    display: inline-block;
  }
}

</style>
